<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper swiper_main" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">
								<image src="../static/icon/lunbomain.png" mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">
								<image src="../static/icon/lunbomain.png" mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">
								<image src="../static/icon/lunbomain.png" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"swipper",
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500
			};
		},
		methods:{
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	.swiper_main {
		/deep/ .uni-swiper-dots {
			position: absolute;
			bottom: 4rpx !important;
			
		}
		/deep/ .uni-swiper-dot-active {  
		    background-color: #5cd1ce !important;  
		}
		
		/deep/ .wx-swiper-dots {
			position: absolute;
			bottom: 4rpx !important;
			
		}
		/deep/ .wx-swiper-dot-active {
		
		
		    background-color: #5cd1ce !important;  
		
		}

	}

	.swiper {
		min-width: 750rpx;
		height: 284rpx;



		.swiper-item {
			width: 100%;
			height: 100%;
			background: #ffffff;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
